<template>
  <div>
    <van-cell-group inset>
      <div>
        <!-- 评论框 -->
        <van-field
          size="large"
          v-model="comment"
          placeholder="请输入评论...."
          maxlength="28"
          show-word-limit
        />
        <!-- 发布按钮 -->
        <van-button @click="add_comment">发表评论</van-button>
      </div>
      <div class="content">
        <!-- 一级评论 -->
        <div class="first" v-for="(item, index) in comment_list" :key="index">
          <div class="first-content">
            <!-- 一级评论用户昵称 -->
            <h3 class="first-username">{{ item.user_name }}</h3>
            <!-- 一级评论发布时间 -->
            <span class="first-time">{{ datetime(item.create_time) }}</span>
            <!-- 一级评论评论内容 -->
            <p class="first-comment">
              {{ item.content }}
            </p>
          </div>
          回复一级评论
          <div class="reply-comment" v-if="item.is_delete">
            <van-field
              v-model="reply"
              placeholder="请输入评论...."
              maxlength="28"
              show-word-limit
            />
            <!-- 0为回复一级评论 -->
            <button @click="add_reply">发表评论</button>
          </div>
          <!-- 次级评论 -->
          <div class="second">
            <ul>
              <li v-for="(sons, index) in item.reply" :key="index">
                <div class="top">
                  <div class="second-content">
                    <!-- 次级评论用户昵称 -->
                    <h3 class="second-username" v-if="sons.user">
                      {{ sons.user }}
                    </h3>
                    <h3 class="second-username" v-else>{{ sons.shop_name }}</h3>
                    <!-- 次级评论评论时间 -->
                    <span class="second-time">{{
                      datetime(sons.create_time)
                    }}</span>
                    <!-- 次级评论内容 xxx回复xxx：评论内容-->
                    <p class="second-comment">
                      <span class="second-reply">
                        <span class="to_reply">{{ item.shops_name }}</span>
                        回复
                        <span class="to_reply">{{ item.user_name }}</span
                        >：
                      </span>
                      {{ sons.content }}
                    </p>
                  </div>
                </div>
                <!-- 回复次级评论 -->
                <div class="reply-comment reply_li" v-if="sons.display">
                  <input
                    type="text"
                    placeholder="请输入评论 . . ."
                    v-model="childComments"
                    @keyup.enter="reply_sumbit(sons, 1)"
                  />
                  <!-- 1为回复次级评论 -->
                  <button @click="reply_sumbit(sons, 1)">发表评论</button>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 暂无评论的空状态 -->
      <el-empty description="暂无评论" v-if="show"></el-empty
    ></van-cell-group>
  </div>
</template>

<script>
import { datetime } from "../../utlis/utils";
export default {
  data() {
    return {
      datetime,
      shops_id: this.$route.query.shops_id,
      comment_list: [],
      comment: "",
      order_id:null,
      user_id:localStorage.getItem('id')
    };
  },
  created() {
    this.submit();
    this.order_list();
  },
  methods: {
    submit: function () {
      this.myaxios(this.host + "users/comment/", "get", {
        id: this.shops_id,
      }).then((data) => {
        console.log(data);
        if (data.errcode == 0) {
          this.$toast.success(data.msg);
          this.comment_list = data.comment;
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    order_list:function(){
      this.myaxios(this.host + "users/order/", "get", {
        user_id: localStorage.getItem("id"),
      }).then((data) => {
        console.log(data);
        if (data.errcode == 0) {
          this.$toast.success(data.msg);
          this.order_id = data.data[0].id;
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    add_comment: function () {
      this.myaxios(this.host + "users/comment/", "post", {
        shops_id: this.shops_id,
        user_id: this.user_id,
        order_id: this.order_id,
        content: this.comment,
      }).then((data) => {
        console.log(data);
        if (data.errcode == 0) {
          this.$toast.success(data.msg);
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
  },
};
</script>

<style>
/* 评论框 */
.head {
  background-color: rgb(248, 248, 248);
  /* position: relative; */
  height: 75px;
  border-radius: 5px;
}
/* 评论框 */
.head input {
  /* position: absolute; */
  top: 13px;
  left: 80px;
  height: 45px;
  border-radius: 5px;
  outline: none;
  width: 65%;
  font-size: 20px;
  padding: 0 20px;
  border: 2px solid #f8f8f8;
}
/* 发布评论按钮 */
.head button {
  /* position: absolute; */
  top: 13px;
  right: 20px;
  width: 120px;
  height: 48px;
  border: 0;
  border-radius: 5px;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  background-color: rgb(118, 211, 248);
  cursor: pointer;
  letter-spacing: 2px;
}
/* 鼠标经过字体加粗 */
.head button:hover {
  font-weight: 600;
}

/* 评论内容区域
.content .first {
  display: flex;
  /* position: relative; */
/* padding: 10px 10px 0px 0; */
/* } */
*/ .first .first-img {
  flex: 1;
  text-align: center;
}
.first img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
/* .first-username,
.second-username {
  color: #504f4f;
}
.first-content {
  flex: 9;
} */
/* .first-time,
.second-time {
  color: #767575;
} */
.first-comment,
.second-comment {
  margin-top: 5px;
}
.second {
  background-color: #f3f3f3;
  margin-top: 10px;
}
.second li {
  padding: 10px 10px 10px 0;
  border-bottom: 1px solid rgb(237, 237, 237);
}
.second .top {
  display: flex;
  /* position: relative; */
}
.to_reply {
  color: rgb(106, 106, 106);
}
.second-content {
  flex: 9;
}
.second .reply_li {
  margin-left: 70px;
}
/* 评论框 */
.reply-comment {
  margin: 10px 0 0 0;
}
.reply-comment input {
  height: 40px;
  border-radius: 5px;
  outline: none;
  width: 70%;
  font-size: 18px;
  padding: 0 20px;
  /* border: 2px solid #f8f8f8; */
  border: 2px solid skyblue;
}
/* 发布评论按钮 */
.reply-comment button {
  width: 15%;
  height: 43px;
  border: 0;
  border-radius: 5px;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  background-color: rgb(118, 211, 248);
  cursor: pointer;
  letter-spacing: 2px;
  margin-left: 20px;
}
/* 鼠标经过字体加粗 */
.reply-comment button:hover {
  font-weight: 600;
}
/* 评论点赞颜色 */
.comment-like {
  color: red;
}
</style>